<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="css/style.css"/>
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body class="login_bg">
    <section class="loginBox">
        <header class="loginHeader">
            <h1>超市账单管理系统</h1>
        </header>
        <section class="loginCont">
			<div id="app">
            
                <div class="inputbox">
                    <label for="user">用户名：</label>
                    <input id="user" v-model="user.account" type="text" name="username" placeholder="请输入用户名" required/>
                </div>
                <div class="inputbox">
                    <label for="mima">密码：</label>
                    <input id="mima" v-model="user.password" type="password" name="password" placeholder="请输入密码" required/>
                </div>
                <div class="subBtn">
                    <input type="submit" @click="login()" value="登录" />
                    <input type="reset" @click="reset()" value="重置"/>
                </div>
				

			</div>
        </section>
    </section>
    <script>
		
		//1.创建一个Vue对象
		var app = new Vue({
			el:"#app",
			data:{
				//不需要指明password account
				//v-model指定以后会自动生成
				user:{}
			},
			methods:{
				login:function(){
					
					var path = "http://localhost:8080/sms/user/login";
					
					this.$http.post(path,this.user).then(function(data){
						//axios 对数据进行了封装
						/**
						 * 例如:后台返回 {code:0,msg:'xxx'}
						 * 
						 * 	    axios包装以后: {body:{code:,msg:}}
						 */
						
						var r = data.body;
						
						var code = r.code;
						var msg  = r.msg;
						
						if(code == 0){
							//登录失败! 提示msg信息
							alert(msg);
						}else{
							//登录成功
							var user = r.data;
							
							//跳转index
							//1.user存储起来
							//注意: 需要将user转成字符串存储
							sessionStorage.setItem("user",JSON.stringify(user));
							//2.跳转页面
							location.href = "index.html";
						}
						
						
						
						
					});
					
				},
				reset:function(){
					//重置
					this.user = {}; 
				}
			}
		});
		
	</script>
</body>
</html>